/* eslint-disable vue/html-indent */ /* eslint-disable vue/html-indent */
<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-select v-model="listQuery.orderType" clearable placeholder="用户类型" style="width:120px">
        <el-option label="vip男" :value="1"></el-option>
        <el-option label="普通男" :value="2"></el-option>
        <el-option label="vip女神" :value="3"></el-option>
        <el-option label="女神" :value="4"></el-option>
        <el-option label="vip女真人" :value="5"></el-option>
        <el-option label="女真人" :value="6"></el-option>
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        clearable
        @change="daterangeChangedTimestamp"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        :loading="listLoading"
        @click="handleFilter"
      >
        查询
      </el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >
        重置
      </el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        :height="'calc(100vh - 250px)'"
      >
        <el-table-column align="center" label="日期" prop="targetDate">
          <template slot-scope="{ row }">
            <span>{{
              (row.targetDate) | parseTime('{y}-{m}-{d}')
            }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="男匹配人数" prop="manMatchNumber">
        </el-table-column>

        <el-table-column align="center" label="男匹配次数" prop="manMatchSum">

        </el-table-column>

        <el-table-column align="center" label="女匹配人数" prop="girlMatchNumber">

        </el-table-column>

        <el-table-column align="center" label="女匹配次数" prop="girlMatchSum">

        </el-table-column>

        <el-table-column align="center" label="匹配成功次数" prop="matchSum">
        </el-table-column>

        <el-table-column align="center" label="免费匹配次数" prop="freeSum">
        </el-table-column>
        <el-table-column align="center" label="付费匹配次数" prop="paySum">
        </el-table-column>

        <el-table-column align="center" label="男每次匹配平均时间(s)">
          <template slot-scope="{ row }">
            <span>{{ (row.fromWaitTime / row.manMatchSum).toFixed(2) }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="女每次匹配平均时间(s)">
          <template slot-scope="{ row }">
            <span>{{ (row.toWaitTime / row.girlMatchSum).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="0-10秒视频次数" prop="tenSecondsSum">
        </el-table-column>
        <el-table-column align="center" label="10-20秒视频次数" prop="twentySecondsSum">
        </el-table-column>
        <el-table-column align="center" label="20秒以上视频次数" prop="secondsSum">
        </el-table-column>
        <el-table-column align="center" label="补贴积分" prop="sysCoins">
          <template slot-scope="{ row }">
            <span>{{ (row.sysCoins / 100) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination'
import DATEPICKER_OPTIONS from '@/config/datepickerOptions'
import { xhrQuickMatchList } from '@/api/analysis'

export default {
  name: 'MatchingAnalysis',
  components: { TablePagination },
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        offset: 0,
        limit: 100,
        startTime: null,
        endTime: null,
        orderType: null
      },
      daterangeValue: '',
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      xhrQuickMatchList(this.listQuery).then(resp => {
        this.listLoading = false
        this.total = resp.data.count
        this.list = resp.data.list
      })
    }
  }
}
</script>
